<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="description" content="HyperSynapse Network 提供免费、稳定、低延迟的 Phira 多人音乐游戏服务器" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>HyperSynapse Network免费Phira多人游戏服务器</title>

  <style>
    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }

    html, body {
      width:100%;
      height:100%;
      font-family: 'Alibaba PuHuiTi', 'Segoe UI', sans-serif;
      background: #000;
      color:#eee;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    body {
      position: relative;
      font-size: 12px;
    }

    .parallax-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: url('https://webstatic.cn-nb1.rains3.com/5712%C3%973360.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }

    header {
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 2rem;
      backdrop-filter: blur(12px);
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
    }

    header img {
      height: 32px;
    }

    .nav-links a {
      color: #eee;
      margin-left: 1rem;
      text-decoration: none;
      transition: 0.3s;
      font-size: 0.9rem;
    }

    .nav-links a:hover {
      color: #fff;
      text-shadow: 0 0 4px #fff;
    }

    section {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      opacity: 0;
      transform: translateY(40px);
      transition: all 1s ease-out;
    }

    section.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .hero-content {
      z-index: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding-left: 10%;
      width: 100%;
    }

    .hero-content h1 {
      font-size: 1.5rem;
      color: #fff;
      animation: fadeInLeft 1s ease-out forwards;
    }

    .tagline {
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: #fff; /* 修改为白色 */
      animation: fadeInLeft 1.5s ease-out forwards;
    }

    .user-count {
      margin-top: 0.3rem;
      font-size: 0.7rem;
      color: #fff; /* 修改为白色 */
      animation: fadeInLeft 2s ease-out forwards;
    }

    .qq-section h2 {
      font-size: 1.5rem;
      color: #fff;
      margin-bottom: 1rem;
    }

    .qq-section button {
      margin-top: 1rem;
      padding: 0.5rem 1.2rem;
      font-size: 1rem;
      color: #fff;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      backdrop-filter: blur(8px);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .qq-section button:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.05);
    }

    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-40px); }
      to { opacity: 1; transform: translateX(0); }
    }
  </style>
</head>
<body>
  <div class="parallax-bg"></div>

  <header>
    <img src="logo.png" alt="logo" />
    <div class="nav-links">
      <a href="index.html">主页</a>
      <a href="rooms.html">房间列表</a>
    </div>
  </header>

  <section class="hero hero-content">
    <h1>HyperSynapse Network Phira多人游戏服务器</h1>
    <p class="tagline">免费 · 稳定 · 低延迟</p>
    <p class="user-count" id="user-count">加载中...</p>
  </section>

  <section class="qq-section">
    <h2>加入我们的 QQ 群（群主是猫娘ヽ(≧Д≦)ノ））获取服务器地址</h2>
    <p>QQ群号：1049578201</p>
    <button onclick="copyQQ()">点击复制</button>
  </section>

  <script>
    function copyQQ() {
      navigator.clipboard.writeText('1049578201')
        .then(() => alert('QQ群号已复制！'));
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, { threshold: 0.3 });

    document.querySelectorAll('section').forEach(section => {
      observer.observe(section);
    });

    // 获取 total_users 数字并展示
    fetch("/usertotal")
      .then(res => res.json())
      .then(data => {
        const count = data.total_users;
        document.getElementById("user-count").innerText = `已有 ${count} 位用户使用过我们的服务器`;
      })
      .catch(() => {
        document.getElementById("user-count").innerText = "无法加载用户数据";
      });
  </script>
</body>
</html>